<template>
	<!-- 个人信息统计 -->
	<view id="">
		<scroll-view class="stat-container">
			<!-- van-sticky 粘性布局 把顶部固定 -->
			<van-sticky>
				<!-- 导航栏和筛选区域 -->
			  <view class="nav">
				<van-nav-bar title="我的积分" custom-style="background-color: #ff6358;padding-top:0px;"
					style="background-color: #ff6358;color: #fff;" title-class="color: #fff;" left-arrow
					@click-left="onClickLeft" />
			  </view>
			  <van-dropdown-menu>
			  	<van-dropdown-item v-model="dropdown.rank" :options="option1" />
			  	<van-dropdown-item v-model="dropdown.date" :options="option2" />
			  	<van-dropdown-item v-model="dropdown.type" :options="option2" />
			  </van-dropdown-menu>
			</van-sticky>
			<!-- 图表 -->
			<view class="charts-box">
				<qiun-data-charts type="pie" :opts="opts" :chartData="chartData" />
			</view>
			<view class="stat-card">
				<view class="stat-card-item">
					<view class="stat-card-content">500</view>
					<view class="stat-card-title">全部积分</view>
				</view>
				<view class="stat-card-item">
					<view class="stat-card-content">500</view>
					<view class="stat-card-title">活动积分</view>
				</view>
				<view class="stat-card-item">
					<view class="stat-card-content">500</view>
					<view class="stat-card-title">红哨积分</view>
				</view>
			</view>
			<view class="stat-title">
				积分明细
			</view>
			<view class="integral-detail">
				<view class="integral-item">
					<van-cell value="内容" label="描述信息">
						<template #title>
							<van-tag round type="danger">标签</van-tag>
							<span class="custom-title">单元格</span>
						</template>
					</van-cell>
				</view>
				<view class="integral-item">
					<van-cell title="单元格" value="内容" label="描述信息" />
				</view>
				<view class="integral-item">
					<van-cell title="单元格" value="内容" label="描述信息" />
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default{
		components:{
			
		},
		data(){
			return {
				dropdown: {
					rank: '',
					date: '',
					type: '',
				},
				chartData: {},
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					legend: {
						show: false
					},
					padding: [5, 5, 5, 5],
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				}
			}
		},
		
		onReady() {
			this.getServerData();
		},
		methods:{
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						series: [{
							data: [{
								"name": "一班",
								"value": 50
							}, {
								"name": "二班",
								"value": 30
							}, {
								"name": "三班",
								"value": 20
							}, {
								"name": "四班",
								"value": 18
							}, {
								"name": "五班",
								"value": 8
							}]
						}]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			onClickLeft:()=>uni.navigateBack()
		},
		computed:{
			
		},
		mounted(){
			
		},
		created(){
			
		},
	}

</script>

<style lang='less' scoped>
.nav{
	::v-deep .van-nav-bar{
		padding-top: 0 !important;
		background: #fd6458;
	}
	::v-deep .van-icon {
		color: white !important;
	}
	::v-deep .van-nav-bar__title {
		color: white !important;
	}
}
::v-deep .stat-container ::-webkit-scrollbar {
		display: none
	}

	.stat-container {
		width: 100%;

		::v-deep .van-nav-bar {
			padding-top: 0 !important;
			background-color: #fd6458;
		}

		.charts-box {
			width: 100%;
			height: 20rem;

		}

		.stat-card {
			width: 96%;
			height: 7rem;
			background-color: #f0edf1;
			margin: 0 auto;
			border-radius: 0.5rem;
			display: flex;
			.stat-card-item {
				width: 33%;
				box-sizing:border-box;
				padding: 1rem;
				padding-top: 2rem;
				.stat-card-content{
					font-size: 18px;
					text-align: center;
				}
				.stat-card-title{
					font-size: 18px;
					text-align: center;
				}
			}
		}
		.stat-title {
			font-size: 18px;
			padding-left: 3%;
			height: 3rem;
			line-height: 3rem;
			border-bottom: 1px solid #f0edf1;
		}

		.integral-detail {
			width: 100%;
		}

		.integral-item {
			width: 100%;
			height: 3rem;
			padding: 3%;
			line-height: 3rem;
			border-bottom: 1px solid #f0edf1;
		}

	}
</style>
